<!-- 个人认证弹窗 -->
<template>
  <div id="person_bank">
    <van-popup v-model="showPersonBank" round :close-on-click-overlay="false">
      <div class="popup-control-box flex">
        <div class="popup-control-box-title s-15">个人认证</div>
        <div class="popup-control-main">
          <van-form @submit="onSubmit">
            <van-field v-model.trim="form.name" name="姓名" label="姓名" placeholder="请填写姓名" :rules="[{ required: true }]" />
            <van-field v-model.trim="form.id_no" name="身份证号" label="身份证号" placeholder="请填写身份证号" :rules="[{ required: true }]" />
            <van-field v-model.trim="form.tel" name="手机号" label="手机号" placeholder="请填写手机号" :rules="[{ required: true }]" />
            <van-field
              v-if="real_name_auth_set && real_name_auth_set.is_invite_code == 1"
              :required="real_name_auth_set.must_invite_code == 1"
              v-model.trim="invite_code"
              name="邀请码"
              label="邀请码"
              placeholder="请输入邀请码"
              :rules="[{ required: true }]"
            />
            <van-field name="radio" label="认证方式">
              <template #input>
                <van-radio-group v-model="activeName" direction="horizontal">
                  <van-radio style="display: flex; margin-bottom: 10px;" name="1" v-if="real_name_auth_set.auth_type.indexOf('2') > -1">手机号认证</van-radio>
                  <!-- <van-radio style="display: flex;margin-bottom: 10px" name="2" v-if="agreement.is_auth_bank == 1">银行卡认证</van-radio> -->
                  <van-radio style="display: flex;" name="3" v-if="real_name_auth_set.auth_type.indexOf('1') > -1">人脸识别认证 </van-radio>
                </van-radio-group>
              </template>
            </van-field>

            <van-field v-model.trim="bank_no" v-if="activeName == '2'" name="个人银行卡号" label="个人银行卡号" placeholder="请填写个人银行卡号" :rules="[{ required: true }]" />
            <div class="inputBox" v-if="(activeName == '1' || activeName == '2') && imgcode">
              <em class="name">验证码</em>
              <input type="text" placeholder="请输入图形码" id="code" v-model="form.captcha" />
              <img class="getcodeImg" style="width: 100%; height: 2.5rem; z-index: 999;" :src="imgcode" @click="getimgdata()" />
            </div>
            <van-field v-if="activeName == '1' || activeName == '2'" v-model.trim="authcode" center clearable label="短信验证码" placeholder="请输入短信验证码">
              <van-button slot="button" size="small" round plain type="info" @click="sureIdentify" v-show="this.count <= 0"> 获取验证码 </van-button>
              <van-button slot="button" size="small" round plain type="info" disabled v-show="this.count > 0"> {{ count }}秒后重新获取 </van-button>
            </van-field>
            <van-field name="radio" label="识别方式" v-if="activeName == '3'">
              <template #input>
                <van-radio-group v-model="form.face_auth_mode" direction="horizontal">
                  <van-radio style="display: flex;" name="1" v-if="fun.getTyep() != 1">支付宝人脸识别</van-radio>
                  <van-radio style="display: flex; margin-top: 10px;" name="2">腾讯云人脸识别</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </van-form>
        </div>

        <div class="popup-control-btn flex-j-sa">
          <van-button type="default" size="small" @click="hiddenPop">取消</van-button>
          <van-button type="danger" size="small" @click="sendCode">去认证</van-button>
        </div>
        <div class="s-11" style="color: #f51d1d; text-align: left; padding: 0 10px 10px 10px;" v-if="hasCompany">当前合同要求企业身份签署，请确认您为企业法人，否则将无法进行企业认证！</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    hasCompany: {
      type: Boolean,
      default: false
    },
    real_name_auth_set: {
      type: Object,
      default: ()=>{}
    },
  },
  watch: {
    value(val) {
      this.showPersonBank = val;
      if (val) {
        this.getimgdata();
      }
    }
  },
  data() {
    return {
      showPersonBank: false,
      activeName: "",
      form: {
        name: "",
        id_no: "",
        tel: "",
        captcha: "",
        face_auth_mode: ""
      },
      invite_code: "",
      authcode: "",
      bank_no: "",
      flow_id: "",
      count: "",
      timer: null,
      imgcode: "", //图形验证码

      is_real_name: false,
      cid: ""
    };
  },
  components: {},
  computed: {},
  methods: {
    onSubmit() {
      console.log("submit", this.form);
    },
    getimgdata() {
      $http
        .get("home-page.getCaptcha", {}, "...")
        .then(res => {
          if (res.data.captcha.status && res.data.captcha.status == "0") {
            this.imgcode = "";
          }
          if (res.data.captcha.img) {
            this.imgcode = res.data.captcha.img;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    sureIdentify() {
      if (this.activeName == 2 && !this.bank_no) {
        this.$toast("请先填写银行卡");
        return;
      }
      let url = "";
      let json = {};
      const TIME_COUNT = 60;
      if (this.activeName == 1) {
        url = "plugin.yun-sign.frontend.h5.person.auth-tel-v2";
        json = this.form;
      } else if (this.activeName == 2) {
        url = "plugin.yun-sign.frontend.h5.person.auth-bank-card-v2";
        this.form.bank_no = this.bank_no;
        json = this.form;
      }
      $http.post(url, json, "...").then(response => {
        if (response.result === 1) {
          this.$toast("已发送");
          this.flow_id = response.data.data.flowId;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.$dialog.alert({ message: response.msg });
        }
      });
    },
    sendCode() {
      if (this.activeName == 2 && !this.bank_no) {
        this.$toast("请先填写银行卡");
        return;
      }

      if (this.activeName != 3 && !this.flow_id) {
        this.$toast("请先获取验证码");
        return;
      }

      if (this.activeName != 3 && !this.authcode) {
        this.$toast("请先填写验证码");
        return;
      }

      if (this.activeName == 3 && !this.form.face_auth_mode) {
        this.$toast("请先选择识别方式");
        return;
      }
      if (this.real_name_auth_set.must_invite_code == 1 && this.fun.isTextEmpty(this.invite_code)) {
        // 必须填写邀请码
        this.$toast("请先填写邀请码");
        return;
      }

      let url = "";
      let json = {};
      if (this.activeName == 1) {
        url = "plugin.yun-sign.frontend.person.check-tel-sms-code";
        json = {
          flow_id: this.flow_id,
          authcode: this.authcode
        };
      } else if (this.activeName == 2) {
        url = "plugin.yun-sign.frontend.person.check-bank-sms-code";
        this.form.bank_no = this.bank_no;
        json = {
          flow_id: this.flow_id,
          authcode: this.authcode
        };
      } else {
        url = "plugin.yun-sign.frontend.h5.person.auth-face-v2";
        json = {
          name: this.form.name,
          id_no: this.form.id_no,
          tel: this.form.tel,
          face_auth_mode: this.form.face_auth_mode,
          callback_url: "",
          is_shop_v2: 1,
          scene_type: this.$route.params.scene,
          order_id: this.$route.params.order_id||0
        };
      }
      $http.post(url, json, "...").then(response => {
        if (response.result === 1) {
          if (this.activeName == 3) {
            window.location.href = response.data.data.authUrl;
          } else {
            this.$dialog.alert({ message: response.msg }).then(() => {
              location.reload();
              this.hiddenPop();
            });
          }
        } else {
          this.$dialog.alert({ message: response.msg });
        }
      });
    },
    hiddenPop() {
      this.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.s-11 {
  font-size: 0.6875rem;
}

.s-13 {
  font-size: 0.8125rem;
}

.s-15 {
  font-size: 0.9375rem;
  color: #1d1d1d;
}

.popup-control-box {
  width: 21.5rem;
  flex-direction: column;

  .popup-control-box-title {
    height: 3rem;
    line-height: 3rem;
  }

  .popup-control-main {
    // max-height: 19rem;
    overflow: scroll;
  }

  .popup-control-main::-webkit-scrollbar {
    width: 0 !important;
  }

  .popup-control-btn {
    margin: 10px;
  }

  .van-button--small {
    width: 80px;
  }
}

.inputBox {
  height: 3rem;
  display: flex;
  border-bottom: 0.0625rem solid #ebebeb;
  text-align: left;
  align-items: center;
  margin: 10px 16px;

  .name {
    width: 65px;
    display: block;
    color: #000;
  }

  input {
    border: none;
    width: 7rem;
  }

  .getcodeImg {
    display: inline-block;
    height: 1.25rem;
    line-height: 1.25rem;
    flex: 1;
  }
}
</style>
